<template>
    <view class="opinion-reaction-root" :style="fullStyle">
        <!-- <view class="search">
            <uni-icons class="search-icon" type="search" />
            <input class="inputInnner" placeholder="搜索专业领域关键字" />
            <view class="verifbtn flexcent">
                搜索
            </view>
        </view> -->
        <!-- 内容 begin -->
        <view class="content-item-1" v-show="tabList != null && tabList.length > 0">
            <view class="tabbar">
                <view class="item" v-for="(item, index) in tabList" :key="index" :class="{ active: tabIndex === index }"
                    @tap="getLiaisonStation(item,index)">
                    {{ item.departNameAbbr }}
                    <view class="underline" :style="{ border: tabIndex === index ? '2px solid #ad2325' : '0' }">
                    </view>
                </view>
            </view>
            <swiper style="height: calc(100% - 100rpx);" :current="0" :duration="300" :show-scrollbar="false">
                <swiper-item>
                    <view class="list" v-show="groupTabList != null && groupTabList.length > 0">
                        <view class="contact-station-list row">
                            <view v-for="(item, index) in groupTabList" :key="index" class="grid"
                                :class="{ active: groupTabIndex === index }" @tap="getMembers(item,index)">
                                <view class="selected"></view>
                                <view class="item">
                                    {{ item.departName }}
                                </view>
                            </view>
                        </view>

                        <view class="cadre-list row" v-show="cadreList != null && cadreList.length > 0">
                            <view @click="showCadreInfo(item)" v-for="(item, index) in cadreList" :key="index"
                                class="grid1">
                                <view class="item">
                                    <image :src="item.representativePic" class="avatar"></image>
                                    <view class="info">
                                        <view class="name">{{ item.representativeName }}</view>
                                        <view class="speciality">

                                            <view :key="roleIndex" v-for="(roleItem,roleIndex) in item.roles"
                                                class="name-tag tag-item empty">
                                                {{ roleItem }}
                                            </view>
                                        </view>

                                        <view class="post" v-if="showRepresentativeMajors">{{ item.representativeDuty }}
                                        </view>
                                        <view v-if="showInfo" class="post" @click="phone(item.representativePhone)"
                                            style="background-color: red;color: #fff;padding: 4 8rpx;border-radius: 16rpx;text-align: center;">
                                            <uni-icons type="phone-filled" color="#fff" size="24rpx"></uni-icons>
                                            联系代办员
                                        </view>
                                        <view class="speciality"
                                            v-if="showRepresentativeMajors && Array.isArray(item.representativeMajors) && item.representativeMajors.length > 0">
                                            <view
                                                v-for="(representativeMajorItem,representativeMajorIndex) in item.representativeMajors"
                                                :key="representativeMajorItem.id" class="tag-item">
                                                {{ representativeMajorItem.majorName }}
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="cadre-list row" v-show="cadreList == null || cadreList.length <= 0">
                            <empty style="width: 100%;height: 100%"></empty>
                        </view>
                    </view>
                    <view class="list" v-show="groupTabList == null || groupTabList.length <= 0">
                        <empty style="width: 100%"></empty>
                    </view>
                </swiper-item>
            </swiper>
        </view>
        <view class="content-item-1" v-show="tabList == null || tabList.length <= 0">
            <empty></empty>
        </view>
    </view>
</template>

<script>
    import {
        GET_LIAISON_STATION,
        GET_MEMBER_LIST,
        GET_OFFICE,
    } from "@/api/representative";
    import {
        requestGet
    } from "@/until/means/request";
    import {
        getFileAccessHttpUrl
    } from "@/until/fileUtil";
    import {
        baseMixins
    } from "@/mixins/baseMixins";
    import empty from "@/compontent/empty/index.vue";
    import {
        cadrePath,
        defaultAvatar
    } from "@/until/publicConfig";

    export default {
        mixins: [baseMixins],
        name: 'personnel',
        components: {
            empty
        },
        props: {
            isPetition: {
                type: String
            },
            noClick: {
                type: Boolean,
                default: false
            },
            showInfo: {
                type: Boolean,
                default: false
            },
            showRepresentativeMajors: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
                swiperHeight: 0,
                tabIndex: 0,
                tabList: [],
                groupTabIndex: 0,
                groupTabList: [],
                cadreList: [],
                cadrePath
            }
        },
        methods: {
            phone(representativePhone) {
                uni.makePhoneCall({
                    phoneNumber: representativePhone
                });
            },
            showCadreInfo(cadreItem) {
                let {
                    noClick
                } = this
                if (noClick) return
                this.goSubPage(`${cadrePath}?representativeId=${cadreItem.id}`)
            },
            getOffice() {
                requestGet({
                    url: GET_OFFICE
                }).then(res => {
                    let firstOffice = res?.length > 0 ? res[0] : {};
                    this.tabList = res
                    this.getLiaisonStation(firstOffice, 0, true)
                }).catch(() => {

                })
            },
            getLiaisonStation(officeItem, index, reloadFlag = false) {
                if (this.tabIndex === index && !reloadFlag) return;
                this.tabIndex = index;
                requestGet({
                    url: GET_LIAISON_STATION,
                    data: {
                        departId: officeItem?.id
                    }
                }).then(res => {
                    let firstLiaisonStation = res?.length > 0 ? res[0] : {};
                    this.groupTabList = res
                    this.getMembers(firstLiaisonStation, 0, true)
                }).catch(() => {

                })
            },
            getMembers(liaisonStationItem, index, reloadFlag = false) {

                if (this.groupTabIndex === index && !reloadFlag) return;
                this.groupTabIndex = index;
                requestGet({
                    url: GET_MEMBER_LIST,
                    data: {
                        departId: liaisonStationItem?.id,
                        isPetition: this.isPetition
                    }
                }).then(res => {
                    this.cadreList = res.map(item => {
                        item.representativePic = item.representativePic && item.representativePic !==
                            '' ? getFileAccessHttpUrl(item.representativePic) : defaultAvatar
                        return item;
                    })
                }).catch(() => {

                })
            }
        }
    }
</script>

<style lang='scss' scoped>
    .tag-root {
        display: flex;
        flex-direction: row;
        width: 100%;
        flex-wrap: wrap;
    }

    .opinion-reaction-root {
        width: 750rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        // 封装的input输入框
        .search {
            display: flex;
            align-items: center;
            // width: 100%;
            // padding: 0 30rpx;
            margin: 30rpx;
            background-color: $bg-color-white;
            border-radius: 30rpx;

            // 输入框前边的图标
            .search-icon {
                opacity: 0.8;
                margin: 0 20rpx;
                font-size: 36rpx !important;
                color: #ababab !important;
            }

            // 输入框
            .inputInnner {
                flex: 1;
                height: 100%;
                font-size: 28rpx;
            }

            // 验证码按钮
            .verifbtn {
                height: 30rpx;
                background: #ad2325;
                font-size: 28rpx;
                color: #FFF;
                padding: 30rpx;
                border-radius: 30rpx;
                margin-left: 30rpx;

                view {
                    width: 140rpx;
                    text-align-last: justify;
                }
            }
        }

        .content-item-1 {
            width: 100%;
            //height: calc(100% - 120rpx);
            height: 100%;
            // padding: 30rpx 0;
            font-size: 30rpx;

            .tabbar {
                width: 100%;
                display: flex;
                justify-content: flex-start;
                overflow-x: auto;
                white-space: nowrap;
                -webkit-overflow-scrolling: touch;
                padding: 20rpx 20rpx;
                box-sizing: border-box;

                .item {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    font-size: $font-size-lg;
                    padding: 0 10rpx;
                }

                .underline {
                    width: 40%;
                    height: 6rpx;
                    margin-top: 10rpx;
                    border-radius: 15px
                }

                .active {
                    color: #ad2325;
                }
            }

            .list {
                height: 100%;
                overflow: hidden;
                display: flex;
                justify-content: space-between;
                padding: 20rpx 0;
                width: 100%;

                .row {
                    display: flex;
                    flex-direction: column;

                    .active {
                        background: #FFF;

                        .selected {
                            width: 6rpx;
                            height: 100%;
                            background: #B90303;
                        }
                    }

                    .grid {
                        display: flex;
                        flex-direction: row;
                        min-height: 150rpx;
                        height: max-content;

                        .item {
                            width: 100%;
                            display: flex;
                            flex-direction: row;
                            justify-content: center;
                            align-items: center;
                            text-align: center;
                        }
                    }
                }


                .contact-station-list,
                .cadre-list {
                    height: 100%;
                    overflow: auto;
                    box-sizing: border-box;

                    .grid {
                        padding: 10rpx 10rpx 10rpx 0;
                        margin: 10rpx 0;
                    }
                }

                // 联络站列表
                .contact-station-list {
                    width: 40%;
                }

                // 干部列表
                .cadre-list {
                    width: 60%;
                    background: #FFF;

                    .grid1 {
                        margin-right: 30rpx;
                        border-bottom: 2rpx solid #E1E1E1;
                        margin-left: 30rpx;

                        .item {
                            display: flex;
                            flex-direction: row;
                            justify-content: center;
                            align-items: flex-start;
                            text-align: center;
                            margin: 20rpx 30rpx 20rpx 0;

                            .avatar {
                                width: 160rpx;
                                height: 176rpx;
                                border-radius: 20rpx;
                            }

                            .info {
                                width: 65%;
                                padding: 0 20rpx;
                                text-align: justify;
                                display: flex;
                                flex-direction: column;

                                view {
                                    padding: 10rpx 0;
                                }

                                .name {
                                    padding-top: 0;
                                    font-weight: 500;
                                    font-size: 32rpx;
                                    color: #222222;
                                    line-height: 35rpx;
                                    font-style: normal;
                                    text-transform: none;
                                    margin-right: 10rpx;
                                }

                                .post {
                                    color: #707070;
                                    font-size: 26rpx;
                                }

                                .speciality {
                                    width: fit-content;
                                    display: flex;
                                    flex-direction: row;
                                    flex-wrap: wrap;
                                    margin-bottom: 10rpx;

                                    .tag-item {
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        background: #FEDADA;
                                        color: #BD0E0E;
                                        border-radius: $border-radius-lg;
                                        font-size: 22rpx;
                                        padding: 10rpx 12rpx;
                                        margin-right: 10rpx;
                                    }

                                    & .empty {
                                        background: transparent;
                                        color: #ABABAB;
                                        border: 1rpx solid #ABABAB;
                                    }
                                }

                            }
                        }
                    }

                }
            }
        }
    }
</style>